import React, { useState } from 'react'
import './index_css/index.scss'
import Search from '../../component/Homes/Header/Search/Search'
import Tabs from '../../component/Homes/Main/Index/ArrowTabs/tabs'
import Banner from '../../component/Homes/Main/Index/Banner/Banner'
import HootFloor from '../../component/Homes/Main/Index/HootFloor/HootFloor'




import { Link, useNavigate } from 'react-router-dom'
// 搜索框下导航数据
const NavList = ['邀请函', '儿童节', '端午节', '招聘', '芒种', '端午节放假通知', '六一儿童节邀请函']

function Index() {
  const navigate = useNavigate()

  //鼠标划过显示加隐藏
  const [hovered, setHovered] = useState(false);

  const toggleHover = () => {
    setHovered(!hovered);
  };


  return (
    <div className='mall-page'>
      {/* 搜索栏  */}
      <div className='header-content'>
        {/* 左侧图片 */}
        <div className='search-left'><img src="https://asset.eqh5.com/e65f07d79d944773bc9d5d44bfa3da58.png?imageMogr2/quality/80/format/webp/" alt="" /></div>

        {/* 搜索框 */}
        <div className='mall-search-box'>
          <div className='mall-search-input'>
            <Search></Search>
          </div>

          {/* 搜索框下导航 */}
          <div className='mall-search-recommend'>
            {
              NavList.map((item => <div key={item} >{item}</div>))
            }

          </div>
        </div>

        {/* 右侧日历 */}
        <div className='market-calendar'>
         <div>1111</div>

        </div>
      </div>
      

      {/* banner */}
      <div className='banner-container'>
        <div className='swiper-banner'>
          <div className='mall-insite-banner'>
            <Banner></Banner>
          </div>

          {/* 楼层滚动栏 */}
          <div className='banner-area'>
            <Tabs></Tabs>
          </div>
        </div>
      </div>

      {/* 内容循环 */}
      <HootFloor></HootFloor>

      {/* 广告  */}
      <div className='banner-bar'>
        <img style={{ width: '100%', height: '100%' }} src="https://asset.eqh5.com/719b855a25d34394aca8ffe56bdad2db.jpg?imageMogr2/quality/80/format/webp/" alt="" />
      </div>

      {/* <div className='ad' style={{ background: "red" }}>
        <Ad></Ad>
      </div> */}

      {/* 内容循环 */}
      {
        [1, 2, 3, 4, 5].map((item) => <HootFloor key={item}></HootFloor>)
      }
    </div>
  )
}

export default Index
